---
const allPages = [
  { text: "常见问题", url: "/faqs" },
  { text: "更新日志", url: "/changelog" },
  { text: "集成", url: "/integrations" },
];

import astroLogo from '../assets/logo.png';
---
<header class="fixed w-full bg-white/90 dark:bg-secondary-950/90 backdrop-blur-sm z-50 py-4 transition-colors duration-300">
  <div class="container-custom flex items-center justify-between">
    <a href="/" class="flex items-center" aria-label="前往首页">
      <img src={astroLogo.src} width="115" height="48" alt="OpenAuth.Net Logo" class="w-10 h-10">
      <span class="ml-2 text-xl font-display font-semibold text-secondary-900 dark:text-white">OpenAuth.Net</span>
    </a>
    
    <nav class="hidden md:flex items-center space-x-8">
      <a href="/" class="text-secondary-600 hover:text-primary-600 dark:text-secondary-300 dark:hover:text-primary-400 font-medium transition-colors">首页</a>
      <a href="http://doc.openauth.net.cn" target="_blank" class="text-secondary-600 hover:text-primary-600 dark:text-secondary-300 dark:hover:text-primary-400 font-medium transition-colors">文档</a>
      <a href="/case-study" class="text-secondary-600 hover:text-primary-600 dark:text-secondary-300 dark:hover:text-primary-400 font-medium transition-colors">演示</a>

      <a href="/pricing" class="text-secondary-600 hover:text-primary-600 dark:text-secondary-300 dark:hover:text-primary-400 font-medium transition-colors">价格</a>

      <!-- <a href="/blog" class="text-secondary-600 hover:text-primary-600 dark:text-secondary-300 dark:hover:text-primary-400 font-medium transition-colors">最新动态</a> -->

      <a href="/faqs" class="text-secondary-600 hover:text-primary-600 dark:text-secondary-300 dark:hover:text-primary-400 font-medium transition-colors">常见问题</a>

      <!-- <a href="/changelog" class="text-secondary-600 hover:text-primary-600 dark:text-secondary-300 dark:hover:text-primary-400 font-medium transition-colors">更新日志</a> -->
      
      <a href="/contact" class="text-secondary-600 hover:text-primary-600 dark:text-secondary-300 dark:hover:text-primary-400 font-medium transition-colors">联系我们</a>
    </nav>
    
    <div class="flex items-center space-x-4">
      <button 
        x-on:click="darkMode = !darkMode" 
        class="p-2 rounded-full text-secondary-500 hover:text-secondary-700 dark:text-secondary-400 dark:hover:text-secondary-200 focus:outline-none focus:ring-2 focus:ring-primary-500"
        aria-label="切换暗黑模式"
      >
        <svg x-show="!darkMode" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
        </svg>
        <svg x-show="darkMode" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
        </svg>
      </button>

      <a href="http://old.openauth.net.cn" class="hidden sm:inline-flex btn-primary">旧版官网</a>
      
      
      <!-- 移动端菜单按钮和下拉菜单 -->
      <div x-data="{ open: false, showAllPages: false }">
        <button 
          @click="open = !open"
          class="md:hidden p-2 rounded-md text-secondary-600 hover:text-secondary-900 dark:text-secondary-300 dark:hover:text-white focus:outline-none focus:ring-2 focus:ring-primary-500"
          aria-label="切换菜单"
        >
          <svg x-show="!open" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
          </svg>
          <svg x-show="open" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
        
        <div 
          x-show="open" 
          x-transition:enter="transition ease-out duration-200"
          x-transition:enter-start="opacity-0 scale-95"
          x-transition:enter-end="opacity-100 scale-100"
          x-transition:leave="transition ease-in duration-150"
          x-transition:leave-start="opacity-100 scale-100"
          x-transition:leave-end="opacity-0 scale-95"
          class="absolute top-16 right-4 w-48 py-2 bg-white dark:bg-secondary-900 rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
          x-cloak
        >
          <a href="/case-study" class="block px-4 py-2 text-sm text-secondary-700 dark:text-secondary-300 hover:bg-secondary-100 dark:hover:bg-secondary-800">演示</a>
          <a href="/pricing" class="block px-4 py-2 text-sm text-secondary-700 dark:text-secondary-300 hover:bg-secondary-100 dark:hover:bg-secondary-800">价格</a>
          <a href="/faqs" class="block px-4 py-2 text-sm text-secondary-700 dark:text-secondary-300 hover:bg-secondary-100 dark:hover:bg-secondary-800">常见问题</a>
          <a href="/contact" class="block px-4 py-2 text-sm text-secondary-700 dark:text-secondary-300 hover:bg-secondary-100 dark:hover:bg-secondary-800">联系我们</a>
        </div>
      </div>
    </div>
  </div>
</header>

<style>
  /* 添加暗黑模式下的SVG样式 */
  @media (prefers-color-scheme: dark) {
    .dark\:fill-slate-800 { fill: #1e293b; }
    .dark\:fill-slate-600 { fill: #475569; }
    .dark\:fill-slate-500 { fill: #64748b; }
    .dark\:fill-slate-700 { fill: #334155; }
    .dark\:stroke-slate-300 { stroke: #cbd5e1; }
    .dark\:stroke-teal-500 { stroke: #14b8a6; }
    .dark\:fill-white { fill: #ffffff; }
  }
  
  /* 添加logo的悬停动画 */
  header a:hover svg {
    transform: scale(1.05);
    transition: transform 0.3s ease;
  }
  
  /* 在Alpine.js加载前隐藏元素 */
  [x-cloak] { display: none !important; }
</style>
